<template>
  <el-container>
    <el-header>
      <i
        class="collapse"
        :class="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
        @click="handleChangeCollapse"
      />
    </el-header>
    <el-container>
      <el-aside>
        <GlobalAside />
      </el-aside>
      <el-container>
        <el-main>
          <router-view v-slot="{ Component }" class="view main-content">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { useHookStore } from "../hooks";
import { defineComponent, computed } from "vue";
import GlobalAside from "/@/components/GlobalAside/index.vue";
export default defineComponent({
  name: "BasicLayout",
  components: { GlobalAside },
  setup() {
    const { state, commit } = useHookStore();
    const isCollapse = computed(() => state.settings.isCollapse);
    const handleChangeCollapse = () => {
      console.log("执行");
      commit("settings/changeCollapse");
    };
    return {
      isCollapse,
      handleChangeCollapse,
    };
  },
  // methods: {
  //   handleChangeCollapse() {
  //     console.log("执行");
  //     this.$store.commit("settings/changeCollapse")
  //   }
  // }
});
</script>

<style lang="less" scoped>
.el-header {
  border-bottom: 1px solid #e6e6e6;
  height: 60px;

  .collapse {
    line-height: 60px;
    font-size: 26px;
  }
}
.el-footer {
  height: 60px;
}

.el-aside {
  height: calc(100vh - 60px);

  :deep(.el-menu) {
    height: 100%;
  }
}

.el-main {
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>